<template>
  <div class="data-screen-left3">
    <div class="scroll" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
      <div ref="scrollRef" class="scroll-box">
        <div v-for="item in logs" :key="item.id" class="scroll-item">
          <!-- <el-avatar fit="fill" :size="25" src="https://i.gtimg.cn/club/item/face/img/2/16022_100.gif" /> -->
          <span class="name">{{ item.createtime }} {{ item.student_name }}（{{ item.class_name }}）</span>
          <span class="address">{{ item.project_name }} : {{ item.achievement }} （分数：{{ item.score }}）</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'DataScreenLeft3',
})

import { api_getLog } from '/@/api/jkDataScreen'

const speed = ref(30)
const timer = ref<any>(null)
const scrollRef = ref<any>(null)
const listData = reactive<any>([
  {
    avatar: 'https://i.gtimg.cn/club/item/face/img/2/16022_100.gif',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])

const props = defineProps({
  exam_id: {
    type: Number,
    default: 0,
  },
})

const queryForm = ref({
  exam_id: 0,
})

//记录
const logs = ref([])

//查看数据
const selectLog = async () => {
  console.log(queryForm.value)
  const res = await api_getLog(queryForm.value)
  logs.value = res.data
  console.log(logs.value)
  // grades.value = res.data
}

const handleMouseEnter = () => {
  clearTimeout(timer.value)
}

const handleMouseLeave = () => {
  selectLog()
  // setInterval(function () {
  //   selectLog()
  // }, 10000)
  //start()
}

const start = () => {
  clearTimeout(timer.value)
  timer.value = useIntervalFn(ListScroll, speed.value)
}

const ListScroll = () => {
  const scrollDom = scrollRef.value
  if (scrollDom.offsetHeight !== 0) {
    if (scrollDom.children.length < 4) {
      clearTimeout(timer.value)
      return
    }
    scrollDom.scrollTop += 1
    if (scrollDom.scrollTop == scrollDom.scrollHeight - scrollDom.clientHeight) {
      const first = scrollDom.children[0]
      scrollDom.removeChild(first)
      scrollDom.append(first)
    }
  }
}

onMounted(async () => {
  console.log(`right exam_id${props.exam_id}`)
  queryForm.value.exam_id = props.exam_id
  selectLog()
  setInterval(function () {
    selectLog()
  }, 10000)
  // start()
})

onBeforeUnmount(() => {
  clearTimeout(timer.value)
})

onUnmounted(() => {
  clearTimeout(timer.value)
})
</script>

<style lang="scss" scoped>
.data-screen-left3 {
  display: flex;
  flex-direction: column;
  height: calc(100% - 40px);
  margin-top: 20px;
  overflow: hidden;

  .scroll {
    width: 100%;
    height: 100%;

    .scroll-box {
      width: 100%;
      height: 100%;
      overflow: hidden;

      .scroll-item {
        display: flex;
        align-items: center;
        height: 50px;
        border-bottom: 1px solid #101f58;

        .name {
          margin-left: 10px;
        }

        .address {
          margin-left: var(--el-margin);
        }
      }
    }
  }
}
</style>
